import { NavLink, Route, Switch } from 'react-router-dom'
import HookUseEffectDemo from './views/HookUseEffectDemo'
import { titledPlaceHolder } from './PlaceHolder'
import HookUseStateDemo from './views/HookUseStateDemo'
import RoutesPropsDemo from './views/RoutesPropsDemo'
import TransitionDemo from './views/TransitionDemo'
import ResumeView from './views/ResumeView'
import CallbackDemo from './views/CallbackDemo'
import MemoDemo from './views/MemoDemo'
import FCProfilingDemo from './views/FCProfilingDemo'
import CustomHookDemo from './views/CusotmHookDemo'

const routes = [
  {
    path: '/',
    text: '首页',
    exact: true,
    component: titledPlaceHolder('首页', 'black'),
  },
  {
    path: '/custom-hook',
    text: 'custom-hook',
    component: CustomHookDemo
  },
  {
    path: '/fcprofiling',
    text: 'fc效率',
    component: FCProfilingDemo,
  },
  {
    path: '/memo',
    text: 'memo',
    component: MemoDemo
  },
  {
    path: '/callback',
    text: 'callback',
    component: CallbackDemo
  },
  {
    path: '/resume',
    text: '简历',
    component: ResumeView,
  },
  {
    path: '/icon-list',
    text: '图标展示',
    component: require('./components/icons-list/IconPage').default
  },
  {
    path: '/transition-demo',
    text: '动画测试',
    exact: true,
    component: TransitionDemo
  },
  {
    path: '/useEffect-demo',
    text: "useEffect",
    component: HookUseEffectDemo
  },
  {
    path: '/useState-demo',
    text: "useState",
    component: HookUseStateDemo
  },
  {
    path: '/routes-props-demo',
    text: "路由的属性",
    component: RoutesPropsDemo
  },
  {
    path: '/about',
    text: '关于我们',
    component: titledPlaceHolder('关于我们', 'purple'),
  },
  {
    path: '/works',
    text: '我的作品',
    component: titledPlaceHolder('我的作品', 'red'),
    subRoutes: [
      {
        path: '/hacknews',
        text: '黑客新闻',
        component: titledPlaceHolder('黑客新闻', 'black'),
      },
      {
        path: '/bill-gates',
        text: '替首富花钱',
        component: titledPlaceHolder('替首富花钱', 'black'),
      },
    ],
  },
]

export default routes

export const makeRoutes = (routes, parentPath = '') => {
  return routes.map(({ component: View, subRoutes, path, ...route }) => {
    const currentPath = parentPath + path
    return (
      <Route key={currentPath} path={currentPath} {...route}>
        <Switch>
          {subRoutes && makeRoutes(subRoutes, currentPath)}
          <Route path={currentPath}>
            <View />
          </Route>
        </Switch>
      </Route>
    )
  })
}

export const makeNavLinks = (routes, parentPath = '') => {
  return (
    <ul>
      {routes.map(({ text, path, subRoutes }) => {
        const currentPath = parentPath + path
        return (
          <li key={currentPath}>
            <NavLink to={currentPath} exact>
              {text}
            </NavLink>
            {subRoutes && makeNavLinks(subRoutes, currentPath)}
          </li>
        )
      })}
    </ul>
  )
}
